<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>遍历前辈和后辈 同胞</title>
    <style>
        .ancestors * {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(function () {
            //返回父元素所有属性
            $("span").parents().css({ "color": "red", "border": "2px solid red" });
        });


        //返回一个父元素的属性
        $(function () {
            $("span").parent();
        });

        //返回特定的父元素
        $(function () {
            $("span").parents("ul");
        });

        //parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
        $(function () {
            $("span").parentsUntil("div");
        });


        //遍历后代
        $(function () {
            $("div").children();
        });

        //返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
        $(document).ready(function () {
            $("div").children("p.1");
        });

        //find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
        $(document).ready(function () {
            $("div").find("span");
        });

        //返回 <div> 的所有后代：
        $(document).ready(function () {
            $("div").find("*");
        });

        //同胞
        $("h2").siblings();
        $("h2").siblings("p");
        $("h2").next();
        $("h2").nextAll();
        $("h2").nextUntil("h6");
        //prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已
        prev()
        prevAll()
        prevUntil()

        //过滤
        $("div p").first();
        $("div p").last();
        $("p").eq(1);
        $("p").filter(".url");
        $("p").not(".url");
    </script>
</head>

<body class="ancestors">body (曾曾祖父元素)
    <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)
            <li>li (父元素)
                <span>span</span>
            </li>
        </ul>
    </div>
</body>

</html>